{% extends "base.html" %}

{% block head %}
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>personal_blog</title>
        <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../static/css/nprogress.css">
        <link rel="stylesheet" type="text/css" href="../static/css/style.css">
        <link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css">
        <link rel="apple-touch-icon-precomposed" href="../static/images/icon/icon.png">
        <link rel="shortcut icon" href="../static/images/icon/favicon.ico">
        <script src="../static/js/jquery-2.1.4.min.js"></script>
        <script src="../static/js/nprogress.js"></script>
        <script src="../static/js/jquery.lazyload.min.js"></script>
        <!--[if gte IE 9]>
        <script src="../static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="../static/js/html5shiv.min.js" type="text/javascript"></script>
        <script src="../static/js/respond.min.js" type="text/javascript"></script>
        <script src="../static/js/selectivizr-min.js" type="text/javascript"></script>
        <![endif]-->
        <!--[if lt IE 9]>
        <script>window.location.href = 'upgrade-browser.html';</script>
        <![endif]-->
    </head>
{% endblock %}

{% block body %}
    <body class="user-select  ">
{% endblock %}
{% block hot %}
<div class="widget widget_hot">
            <h3>热门文章</h3>
            <ul>
                {% for article in articles.order_by('-views') %}
                <li><a href="{{ url('category:article_detail',kwargs={'id':article.id}) }}"><span class="thumbnail">
                    {% if article.tag.id==1 %}
                <img class="thumb" data-original="../../static/images/php.png" src="../../static/images/php.png" alt="">
            {% elif article.tag.id==2 %}
                <img class="thumb" data-original="../../static/images/Python.png" src="../../static/images/Python.png"
                     alt="">
            {% elif article.tag.id==3 %}
                <img class="thumb" data-original="../../static/images/MySQL.png" src="../../static/images/MySQL.png"
                     alt="">
            {% else %}
                <img class="thumb" data-original="../../static/images/c++.png" src="../../static/images/c++.png" alt="">
            {% endif %}
                </span>
                    <span
                        class="text">{{ article.title }}</span><span class="muted"><i
                        class="glyphicon glyphicon-time"></i> {{article.date}}</span><span class="muted"><i
                        class="glyphicon glyphicon-eye-open"></i> {{ article.views }}</span></a></li>
                {% endfor %}


            </ul>
        </div>
{% endblock %}
{% block content %}
    <div class="content">
        <div class="jumbotron">
            <h1>welcome to my personal_blog</h1>
            <p>the life is short i use python </p>
        </div>
        <div id="focusslide" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                <li data-target="#focusslide" data-slide-to="1"></li>
                <li data-target="#focusslide" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active"><a href="" target="_blank"><img src="../static/images/banner/banner_01.jpg"
                                                                         alt="" class="img-responsive"></a>
                    <!--<div class="carousel-caption"> </div>-->
                </div>
                <div class="item"><a href="" target="_blank"><img src="../static/images/banner/banner_02.jpg" alt=""
                                                                  class="img-responsive"></a>
                    <!--<div class="carousel-caption"> </div>-->
                </div>
                <div class="item"><a href="" target="_blank"><img src="../static/images/banner/python.png" alt=""
                                                                  class="img-responsive"></a>
                    <!--<div class="carousel-caption"> </div>-->
                </div>
            </div>
            <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                    class="sr-only">上一个</span> </a> <a class="right carousel-control" href="#focusslide"
                                                       role="button" data-slide="next" rel="nofollow"> <span
                class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                class="sr-only">下一个</span> </a></div>
        <article class="excerpt-minic excerpt-minic-index">
            <h2><span class="red">【今日推荐】</span>{{ title }}</h2>
            <p class="note">{{ content }}</p>
        </article>
        <div class="title">
            <h3>最新发布</h3>

        </div>
        {% for  article in articles %}
        <article class="excerpt excerpt-1"><a class="focus" href="{{ url('category:article_detail',kwargs={'id':article.id}) }}" title="">
            {% if article.tag.id==1 %}
                <img class="thumb" data-original="../../static/images/php.png" src="../../static/images/php.png" alt="">
            {% elif article.tag.id==2 %}
                <img class="thumb" data-original="../../static/images/Python.png" src="../../static/images/Python.png"
                     alt="">
            {% elif article.tag.id==3 %}
                <img class="thumb" data-original="../../static/images/MySQL.png" src="../../static/images/MySQL.png"
                     alt="">
            {% else %}
                <img class="thumb" data-original="../../static/images/c++.png" src="../../static/images/c++.png" alt="">
            {% endif %}

        </a>


            <header><a class="cat" href="#">{{ article.tag.name}}<i></i></a>
                <h2><a href="{{ url('category:article_detail',kwargs={'id':article.id}) }}" title="">{{ article.title }}</a></h2>
            </header>


            <p class="meta">
                <time class="time"><i class="glyphicon glyphicon-time"></i> {{ article.date }}</time>
                <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共{{ article.views }}人围观</span> <a class="comment"
                                                                                                   href="{{ url('category:article_detail',kwargs={'id':article.id}) }}"><i
                    class="glyphicon glyphicon-comment"></i> {{ article.comments_set.count() }}个不明物体</a></p>
            <p class="note">
                {{ article.content[0:120] }}...</p>
        </article>
    {% endfor %}


        <!--下划分页-->
{#        <nav class="pagination" style="display: none;">#}
{#            <ul>#}
{#                <li class="prev-page"></li>#}
{#                <li class="active"><span>1</span></li>#}
{#                <li><a href="?page=2">2</a></li>#}
{#                <li class="next-page"><a href="?page=2">下一页</a></li>#}
{#                <li><span>共 2 页</span></li>#}
{#            </ul>#}
{#        </nav>#}
    </div>
{% endblock %}


{% block bo %}
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery.ias.js"></script>
    <script src="../static/js/scripts.js"></script>
{% endblock %}